<template>
  <el-dialog
    :title="$t('msg.excel.roleDialogTitle')"
    :model-value="modelValue"
    @close="closed"
  >
    <el-checkbox-group v-model="userRoleTitleList">
      <el-checkbox
        v-for="item in allRoleList"
        :key="item.id"
        :label="item.title"
      ></el-checkbox>
    </el-checkbox-group>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">{{ $t('msg.universal.cancel') }}</el-button>
        <el-button type="primary" @click="onConfirm">{{
          $t('msg.universal.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue'
// // import { roleList } from '@/api/role'
import { watchSwitchLang } from '@/utils/i18n'
// import { userRoles, updateRole } from '@/api/user-manage'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  userId: {
    type: String,
    required: true
  }
})

// const emits = defineEmits(['update:modelValue', 'updateRole'])

// // 所有角色
// const allRoleList = ref([])
// // 获取所有角色数据的方法
// const getListData = async () => {
//   allRoleList.value = await roleList()
//   console.log(allRoleList.value)
// }
// getListData()
// watchSwitchLang(getListData)

// // 当前用户角色
// const userRoleTitleList = ref([])
// // 获取当前用户角色
// const getUserRoles = async () => {
//   const res = await userRoles(props.userId)
//   userRoleTitleList.value = res.role.map(item => item.title)
// }
// watch(
//   () => props.userId,
//   val => {
//     if (val) getUserRoles()
//   }
// )

// /**
//   确定按钮点击事件
//  */
// const i18n = useI18n()
// const onConfirm = async () => {
//   // 处理数据结构
//   const roles = userRoleTitleList.value.map(title => {
//     return allRoleList.value.find(role => role.title === title)
//   })

//   await updateRole(props.userId, roles)

//   ElMessage.success(i18n.t('msg.role.updateRoleSuccess'))
//   closed()
//   // 角色更新成功
//   emits('updateRole')
// }

// /**
//  * 关闭
//  */
// const closed = () => {
//   emits('update:modelValue', false)
// }
</script>

<style lang="scss" scoped></style>
